<template>
  <el-container style="flex-direction:column;position: relative;">
    <el-main style="padding:0;">
      <div style="display:flex;height:30px;align-items:center;">
        <el-select clearable v-model="storeId" placeholder="请选择门店" size="mini" @change="selectChange">
          <el-option
            v-for="item in storeList"
            :key="item.storeId"
            :label="item.name"
            :value="item.storeId">
          </el-option>
        </el-select>
        <el-button type="warning" size="mini" icon="el-icon-refresh-left" style="margin-left:15px" @click="reset">重置</el-button>
      </div>
     
      <el-table
        height="calc(100vh - 215px)"
        :data="pagingStoreEvaluateData.records"
        size="mini"
        style="width: 100%;"
      >
        <el-table-column
          align="center"
          header-align="center"
          prop="evaluateId"
          label="ID"
          width="55"
        ></el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="number"
          label="订单号"
          min-width="90"
        ></el-table-column>
        <el-table-column align="center" header-align="center" label="微信用户信息" min-width="100">
          <template slot-scope="scope">
            <div style="display:flex;align-items: center;justify-content: space-around;">
              <el-popover
                style="cursor: pointer;"
                placement="right"
                max-width="200"
                trigger="hover"
              >
                <img
                  :src="baseURL + scope.row.wxUserDto.avatarUrl"
                  style="max-width: 200px;height:auto;"
                />
                <img
                  slot="reference"
                  :src="baseURL + scope.row.wxUserDto.avatarUrl"
                  style="width:36px;height:36px;border-radius: 50%;"
                />
              </el-popover>
              <div style="flex:1;">{{ scope.row.wxUserDto.nickName }}</div>
            </div>
          </template>
        </el-table-column>
         <el-table-column
          align="center"
          header-align="center"
          prop="name"
          label="门店名称"
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="isSelfMention"
          label="订单类型"
          width="80"
        >
          <template slot-scope="scope">{{ scope.row.isSelfMention == 1 ? "自提" : "配送" }}</template>
        </el-table-column>
       
        <el-table-column align="center" header-align="center" label="综合评分" min-width="140">
          <template slot-scope="scope">
            <el-rate disabled v-model="scope.row.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          show-overflow-tooltip
          prop="comment"
          min-width="120px"
          label="评论内容"
        ></el-table-column>
        <el-table-column align="center" header-align="center" label="评论图片" min-width="150">
          <template slot-scope="scope">
            <el-image
              v-for="img, index in scope.row.image"
              :key="index"
              :src="img"
              :preview-src-list="scope.row.image"
              style="width:36px;height:36px;border-radius: 50%;"
            ></el-image>
          </template>
        </el-table-column>
         <el-table-column
          align="center"
          header-align="center"
          prop="storeName"
          min-width="200"
          label="订单商品信息"
        >
          <template slot-scope="scope">
            <div style="display:flex;flex-direction:column;">
              <div
                style="display:flex;justify-content: center;"
                v-for="s in scope.row.storeOrderCommodityDetailsDTOList"
                :key="s.commodityDetailsId"
              >
                <el-popover
                  style="cursor: pointer;"
                  placement="right"
                  max-width="200"
                  trigger="hover"
                >
                  <img
                    :src="s.image ? baseURL + s.image : '#'"
                    style="max-width: 200px;height:auto;"
                  />
                  <img
                    slot="reference"
                    :src="s.image ? baseURL + s.image : '#'"
                    style="width:24px;height:24px;border-radius: 50%;"
                  />
                </el-popover>
                <span>{{ s.commodityName }}-</span>
                <span v-if="s.isMultiSpecification == 0">默认|</span>
                <span v-else>
                  <span v-for="g in s.groupValueList" :key="g.groupValueId">{{ g.groupValueName }}</span>
                  <span>|</span>
                </span>
                <span>￥{{ s.unitPrice }}</span>
                <span>x{{ s.quantity }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          header-align="center"
          prop="createTime"
          label="评价时间"
          min-width="160"
        >
          <template slot-scope="scope">{{ scope.row.createTime | dateYMDHMSFormat }}</template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="background-color: #f6f6f6;max-height:60px;">
      <el-pagination
        style="margin-top: 8px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagingStoreEvaluateData.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pagingStoreEvaluateData.size"
        layout="total, prev, pager, next, sizes,jumper"
        :total="pagingStoreEvaluateData.total"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { baseURL } from '@/utils/setting.js'
import { getPagingStoreEvaluate } from '@/api/modules/orderManagement/evaluate.js'
import {getUserHaveOrBelongToStore} from '@/api/modules/StoreManagement/storeList.js'
export default {
  data() {
    return {
      pagingStoreEvaluateData: {},
      size: 10,
      current: 1,
      storeList:[],
      storeId:null,
    }
  },
  computed: {
    baseURL() { return baseURL },
  },
  created() {
    this.getPagingStoreEvaluate()
    getUserHaveOrBelongToStore().then(res=>{
      this.storeList = res.data.data
    })
  },
  methods: {
    reset(){
      this.storeId = null
      this.getPagingStoreEvaluate()
    },
    selectChange(){
      this.getPagingStoreEvaluate()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val
      this.getPagingStoreEvaluate()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.current = val
      this.getPagingStoreEvaluate()
    },
    getPagingStoreEvaluate() {
      let data = {
        size: this.size,
        current: this.current,
        storeId: this.storeId,
      }
      getPagingStoreEvaluate({ evaluatePagingDTO: JSON.stringify(data) }).then(res => {
        let data = res.data.data
        data.records = data.records.map(item => {
          item.image = JSON.parse(item.image).map(i => {
            return this.baseURL + i
          })
          return item
        })
        this.pagingStoreEvaluateData = data
      })
    }
  }
}
</script>

<style>
</style>